<template>
  <div>
    <div class="dashboard-container">
      
      <div class="big-back-box">
        <div class="top">订单管理</div>
      <div style="height: 20px"></div>
        <el-card class="box-card" style="margin: 0 auto">
          <!-- 条件搜索 -->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label>
              <el-select v-model="type" placeholder="订单类型">
                <el-option
                  v-for="item in orderType"
                  :key="item"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label>
              <el-select v-model="state" placeholder="订单状态">
                <el-option
                  v-for="item in orderState"
                  :key="item"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchOrder">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 列表 -->
          <el-table :data="tableData" border style="width:100%" fit >
            <el-table-column fixed label="订单ID" width="120">
              <template slot-scope="{ row }">
                <span>{{ row.id }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="typeId" label="订单类型" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="money" label="金额" width="120">
              <template slot-scope="{ row }">
                <span>{{ row.money }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="120">
              <template slot-scope="{ row }">
                <span>{{ row.state }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="paymentOrNot" label="是否付款" width="120">
              <template slot-scope="{ row }">
                <span v-show="row.paymentOrNot=='on'">是</span>
                <span v-show="row.paymentOrNot=='off'">否</span>
              </template>
            </el-table-column>
              <el-table-column label="异常情况" width="120">
              <template slot-scope="{ row }">
                <span v-show="row.exceptionIdentification=='normal'">正常</span>
                <span v-show="row.exceptionIdentification=='canceling'">取消中</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="0" >
              <template slot-scope="{row}">
                <router-link :to="{path:'/customerCenter/customerOrder/readMore',query:{id:row.id}}">
                  <el-button 
                   style="margin-right:10px"
                   type="text" size="small">详情</el-button>
                </router-link>
                <el-button   type="primary" v-show="row.state=='待指派'||row.state=='待付款'||row.state=='处理中'" size="small" @click="toCancelPayPage(row)"
                :disabled="row.exceptionIdentification=='canceling'"
                >取消</el-button>
                  <el-button   
                   style="margin-left:0"
                  type="primary" v-show="row.state=='待确认'" size="small" @click="toConfirm(row)"
                :disabled="row.exceptionIdentification=='canceling'"
                >确认</el-button>
                <el-button   type="primary" v-show="row.state=='待付款'" size="small" @click="toPayPage(row)">付款</el-button>
                <el-button  
                 style="margin-left:0"
                 type="primary" v-show="row.state=='完成'" size="small" @click="toEvaluationPage(row)">评价</el-button>
                 
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
        </el-card>
            <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
          />
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderList,confirmForOrder } from "@/api/order";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination }, // 分页
  mounted(){    
   this.showList();
  },
  data() {
    return {
      total:0,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      type: "",
      state: "",
      //订单类列表
      orderType: [
        {
          label: "公司建立",
          value: "公司建立"
        },
        {
          label: "公司变更",
          value: "公司变更"
        },
        {
          label: "工商年报",
          value: "工商年报"
        },
        {
          label: "信息公示",
          value: "信息公示"
        },
        {
          label: "资质证照",
          value: "资质证照"
        },
        {
          label: "知识产权",
          value: "知识产权"
        },
        {
          label: "法律求助",
          value: "法律求助"
        }
      ],
      //订单状态列表
      orderState: [
        {
          label: "待指派",
          value: "待指派"
        },
        {
          label: "待付款",
          value: "待付款"
        },
        {
          label: "处理中",
          value: "处理中"
        },
        {
          label: "待审核",
          value: "待审核"
        },
        {
          label: "待确认",
          value: "待确认"
        },
        {
          label: "完成",
          value: "完成"
        }
      ],
      //   列表
      tableData: []
    };
  },
  methods: {
    toConfirm(row){
        this.$confirm('此操作将确认该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            confirmForOrder(row.id).then(res=>{
            if(res.data.result){
            this.$message({
            type: 'success',
            message: res.data.message
          });
            this.showList();
            }  
            
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    


    toEvaluationPage(row){
     this.$router.push({path:"/customerCenter/customerOrder/assess",query:{id:row.id}})
    },

    toPayPage(row){
       this.$router.push({path:"/customerCenter/customerOrder/pay",query:{id:row.id}});
    },
    toCancelPayPage(row){
      this.$router.push({path:"/customerCenter/customerOrder/cansel",query:{id:row.id}});
    },
    showList() {
      getOrderList(this.listQuery, this.state, this.type).then(res => {
        console.log(res.data);
        this.total=res.data.orderList.totalSize;
        this.tableData=res.data.orderList.content;
      });
    },
    getList() {
      this.showList();
    },
    searchOrder() {
      this.showList();
    },
 
  }
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1080px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>